<template>
  <swiper
    :options="swiperOption"
    ref="mySwiper"
    @someSwiperEvent="callback"
    class="banner-swiper"
    v-if="banner.length>0"
  >
    <!-- slides -->
    <swiper-slide
      v-for="(b,item) in banner"
      :key="item"
      :style="{backgroundImage: 'url(' + b.banner + ')'}"
      @click.native="toDetail(b.id)"
    ></swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!--        <div class="swiper-button-prev" slot="button-prev"></div>-->
    <!--        <div class="swiper-button-next" slot="button-next"></div>-->
    <!--        <div class="swiper-scrollbar"   slot="scrollbar"></div>-->
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "Banner",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        speed: 900,
        autoplay: {
          delay: 3000, //3秒切换一次
          disableOnInteraction: false
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper

        pagination: {
          el: ".banner-swiper .swiper-pagination",
          clickable: true
        }
      },
      banner: []
    };
  },
  mounted() {
    this.$api.home.bannerList().then(res => {
      // 执行某些操作
      this.banner = res.data.data;
    });
  },
  methods: {
    callback() {},
    toDetail(id) {
      console.log(id);
      this.$router.push({ path: "/home/detail", query: { id: id } });
    }
  },
  computed: {
    // swiper() {
    //     return this.$refs.mySwiper.swiper
    // }
  }
};
</script>

<style>
.banner-swiper {
  height: 11rem;
  /*background: lemonchiffon;*/
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2 !important;
  right: 0;
}
.banner-swiper .swiper-pagination {
  text-align: center;
  /*padding-left: 20px;*/
}
.banner-swiper .swiper-slide {
  background-size: 100% 100%;
}
.banner-swiper .swiper-pagination span {
  display: inline-block;
  opacity: 0.48;
  width: 5px !important;
  height: 5px !important;
  background-color: #9ea4a1;
  border: none;
  outline: 0;
  padding: 0;
  margin: 10px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 50%;
}
.banner-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #14a365 !important;
}
</style>